@charset "utf-8";
/* CSS Document */
*{padding: 0px;
	margin: 0px;}
	.man{
		width: 100%;
		height: 185px;
		overflow-x:auto;
		overflow-y:hidden;
		background: linear-gradient(white,silver);
	}
	.man-nav
	{
		width:200%;

	}

	.renwu{
		width: 160px;
		height: 160px;
		float: left;
		position:relative;
	}
	.people{
		width: 110px;
		height: 110px;
		border: 2px solid;
		border-radius: 50%;
		position:absolute;
		margin-left: 25px;
		margin-top: 45px;
		overflow: hidden;
		z-index: 10;
		background: rgba(215,22,25,1.00);
		transition: all 0.5s ease-in-out;
	}
	.people:hover{
		width: 90px;
		height: 90px;
		margin-left: 35px;
		margin-top: 65px;
		transition: all 0.2s ease-in-out;
	}
	.people1{
		width: 110px;
		height: 110px;
		border: 2px solid;
		border-radius: 50%;
		position:absolute;
		margin-left: 25px;
		margin-top: 45px;
		overflow: hidden;
		transition: all 0.5s ease-in-out;
		z-index: 5;
		color: aliceblue;
		background: rgba(96,91,91,1.00);
		font-family:kaiti;
		font-size: 1.2em;
		text-align: center;
		

	}
	.renwu:hover .people1{
		width: 156px;
		height: 156px;
		position:absolute;
		overflow: hidden;
		margin-left: 0px;
		margin-top: 0px;
		z-index: 15;
		opacity: 0.6;
		color: darkorange;
		transition: all 0.2s ease-in-out;
	}
	#play{ animation:colorchanges 20s;}
    @keyframes colorchanges {
        0%,5% {border-color:rgba(109,185,146,1.00); }5%,10% {border-color:rgba(224,109,111,1.00); }10%,15% {border-color:rgba(175,19,209,1.00) }
		15%,20% {border-color:rgba(187,69,71,1.00) }20%,25% {border-color: }25%,30% {border-color: }
		30%,35% {border-color: }35%,40% {border-color: }40%,45% {border-color: }
		45%,50% {border-color: }50%,55% {border-color: }55%,60% {border-color: }
		60%,65% {border-color: }65%,70% {border-color: }70%,75% {border-color: }
		75%,80% {border-color: }80%,85% {border-color: }85%,90% {border-color: }
		90%,95% {border-color: }95%,100% {border-color: }
       

    }
